<template>
  <el-table
      :data="metas"
      style="width: 100%">
    <el-table-column
      label="文件名"
      width="180">
      <template slot-scope="scope">
        <div v-html="img(scope.row)"></div>
      </template>
    </el-table-column>
    <el-table-column
      label="文件大小"
      width="180">
      <template slot-scope="scope">
        <div v-html="bytesToSize(scope.row)"></div>
      </template>
    </el-table-column>
    <el-table-column
      label="文件类型"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.type}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleDownload(scope.$index, scope.row)">下载</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'
import * as constant from '@/store/yg/common/constant'

export default {
  props: {
    metas: {
      type: Array,
    },
    field: {
      type: String,
    }
  },
  data() {
    return {
      host: constant.API_SERVER,
    }
  },
  computed: {
    path() {
      return this.getPath();
    }
  },
  methods: {
    handleDownload(index, meta) {
      const path = meta.path==="tmp"?"":meta.path;
      const type = meta.type===undefined?"":meta.type;
      location.href = this.host + '/open/uploadfetch?file='
      + meta.fileName + '&path=' + path + '&type=' + type;
    },
    handleDelete(index, meta) {
      this.$confirm('请确认此操作是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'danger',
      }).then(() => {
        this.deleteFile(index, meta);
      }).catch(() => {
      });
    },
    deleteFile(index, meta) {
      var uri = "path=" + meta.path + "&file=" + meta.fileName;
      axios.post(this.host + "/open/uploadremove?" + uri)
        .then(response => {
          if (index > -1) {
            this.metas.splice(index, 1);
          }
          this.$store.state.edit.dataChanged = true;
          this.$store.state.edit.editWarningMessage = 'upload_file_well_info';
          this.$store.state.edit.blinkWarning = true;
        }, response => {
          alert(response.response.data.error);
        }
      );
    },
    img: function (meta) {
      if (!meta) return '';
      if (meta.fileName.match(/.+\.(jpg|gif|png|bmp|jpeg)$/)) {
        var source =
          "<img src='" + this.host +
          "/open/uploadfetch?file=" + meta.fileName +
          "&path=" + meta.path +
          "&type=" + meta.type + "' width='150'/>";
        return source;
      } else {
        return meta.originalFileName ? meta.originalFileName : meta.fileName;
      }
    },
    bytesToSize: function(meta) {
        var bytes = meta.size;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        if (bytes == 0) return '';
        let i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        if (i == 0) return bytes + ' ' + sizes[i];
        return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
    },
    getPath() {
      var content = this.$store.state.edit.entry.panel.content;
      for (var i in content) {
        var columns = content[i].column;
        if (this.$store.state.edit.entry.panel.column2) {
          columns = columns.concat(this.$store.state.edit.entry.panel.column2);
        }
        for (var j in columns) {
          if (this.field == columns[j].field) {
            return columns[j].path;
          }
        }
      }
    }
  },
  mounted() {
    if ( ! this.metas || this.metas.length == 0) {
      return;
    }
    var newMetas = [];
    for (var i in this.metas) {
      var meta = this.metas[i];
      if (meta.fileName) {
        continue;
      }
      var newMeta = {};
      newMeta.fileName = meta;
      newMeta.path = this.path;
      newMeta.type = '';
      newMeta.size = '';
      newMetas.push(newMeta);
    }
    this.metas.splice(0, this.metas.length);
    for (var i in newMetas) {
      this.metas.push(newMetas[i]);
    }
  }
}
</script>
